<template>
    <view>
        <view class="header">
            <view class="uni-padding-wrap" style="overflow: scroll;">
                <scroll-view scroll-x="true" scroll-left="120" style="width: 1000rpx;">
                    <view class="scroll-view-item" :class="{active:defaultselect==0}" 
                    @click="active">
                        全部消息
                    <view v-show="defaultselect==0"></view>
                    </view>             
                    <view class="scroll-view-item" v-for="(item,index) in mtype" 
                    :key="'msgtype'+index" @click="tab(index)">
                        {{item.name}}
                        <view v-show="selectindex==index"></view>
                    </view>         
                </scroll-view>
            </view>
        </view>
        
        <!-- <uni-load-more :status="more" :contentText="contentText" color="#9b5904">
            
        </uni-load-more>
        -->
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover"  
            v-for="(msg,index) in msgs" :key="`mymsg${index}`" 
            v-show="showall||showtype==msg.msgtype">
                <view class="uni-media-list">
                    <!-- <image class="uni-media-list-logo" 
                    :src="msg.msgsender_portrait"></image> -->
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">
                            <text class="uni-title">{{msg.msgfrom}}</text>
                            <!-- <uni-badge text="2" type="error" @click="bindClick"></uni-badge> -->
                            <text>{{msg.msgtime}}</text>                                
                        </view>
                        <view class="uni-media-list-text-bottom">
                            <text>{{msg.msgcon}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
                
    </view>
</template>

<script>
    // import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
    // import uniBadge from "@/components/uni-badge/uni-badge.vue" 
    export default {
        data() {
            return {
                // components:{uniLoadMore,uniBadge},
                defaultselect:0,
                selectindex:-1,
                showall:1,
                showtype:1,
                mtype:[
                    {
                        name:'聊天互动',
                        type:1
                    },
                    {
                        name:'交易物流',
                        type:2
                    },
                    {
                        name:'官方通知',
                        type:3
                    }
                    ],
                msgs:[
                    {
                        msgfrom:'千库店铺',
                        msgcon:'好的！已经安排为您发货！请耐心等候！',
                        // msgsender_portrait:'../../static/images/msgpage_user_potrait1.png',
                        numof_unread_msgs: 3,//未读消息条数
                        msgtype:1, //1  聊天互动 2  交易物流   3官方通知
                        is_readed: 0, //0 unreaded    1 readed
                        msgtime:'09:30'//新消息收到的时间
                    },
                    {
                        msgfrom:'Qianku',
                        msgcon:'亲！我帮您查了一下，仓库那边已经开始发货了。',
                        // msgsender_portrait:'../../static/images/msgpage_user_potrait2.png',
                        numof_unread_msgs: 1,
                        msgtype:2,
                        is_readed: 0,
                        msgtime:'09:30'
                    },
                    {
                        msgfrom:'千小库',
                        msgcon:'没问题，可以的',
                        // msgsender_portrait:'../../static/images/msgpage_user_potrait3.png',
                        numof_unread_msgs: 3,
                        msgtype:3,
                        is_readed: 0,
                        msgtime:'09:30'
                    },
                    {
                        msgfrom:'千库数码',
                        msgcon:'订单编号是KU58800000000，已寄出，麻烦留意一下',
                        // msgsender_portrait:'../../static/images/msgpage_user_potrait4.png',
                        numof_unread_msgs: 3,
                        msgtype:1,
                        is_readed: 0,
                        msgtime:'09:10' 
                    },
                    {
                        msgfrom:'千库店铺Qianku',
                        msgcon:'您已成为本店的黄金会员，我们将竭诚为您提供优质的专属服务',
                        // msgsender_portrait:'../../static/images/msgpage_user_potrait5.png',
                        numof_unread_msgs: 3,
                        msgtype:2,
                        is_readed: 0,
                        msgtime:'09:30' 
                    },
                    {
                        msgfrom:'千库店铺Qianku',
                        msgcon:'好的！',
                        // msgsender_portrait:'../../static/images/msgpage_user_potrait6.png',
                        numof_unread_msgs: 3,
                        msgtype:3,
                        is_readed: 0,
                        msgtime:'09:30'
                    },
                    ],
                    contentText:{
                        contentdown: "上拉刷新",
                        contentrefresh: "正在加载...",
                        contentnomore: "没有更多数据了"                        
                    }
            }
        },
        methods: {
            active:function(){
                this.defaultselect=0;
                this.selectindex=-1;
                this.showall=1;
            },
            tab:function(index){
                this.defaultselect=1;
                this.selectindex=index;
                this.showall=0;
                this.showtype=index+1;
            }           
        }
    }
</script>

<style>
 .header{
     width: 750rpx;
     height: 180rpx;
     border-radius: 0 0 30rpx 30rpx;
     background:linear-gradient(to left,#e96636,#dc3667);
     overflow: hidden;
 }
 .uni-padding-wrap{
     margin-top: 80rpx;
 }
 .active{
     font-weight: bolder;
 }
 .scroll-view-item{  
     margin:0 40rpx;
     display: inline-block;
     color:#fff;
     position: relative;
     line-height: 80rpx;
 }
 .scroll-view-item>view{
     height:4rpx;
     width: 100%;
     position: absolute;
     background: #deccff;
     bottom:0rpx;
     left: 0;
     border-radius: 2rpx;
 }
  .uni-media-list-logo {
         width: 120upx;
         height: 120upx;
     } 
  
     .uni-media-list-body {
         height: auto;
         justify-content: space-around;
     }
  
     .uni-media-list-text-top {
         height: 74upx;
         font-size: 28upx;
         overflow: hidden;
     }
     .uni-media-list-text-top>text{
         display: inline-block;
     }
     .uni-media-list-text-top>text:last-child{
         float: right;
         margin-top: 20rpx;
     }
     .uni-media-list-text-bottom {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
     .uni-badge{
         width: 30rpx!important;
         height: 30rpx;
         line-height: 30rpx;
         text-align: center;
         border-radius: 15rpx;
         position: relative;
         top: -5px;
         left: 4px;
     }
     .uni-title{
         font-weight: bold;
     }
     .uni-list-cell::after{
         display: none;
     }
     .uni-list-cell{
         margin-bottom: 20rpx;
         background-color: #fff;
     }
     .uni-list{
         background: #f8f8f8;
     }
</style>